<template>
    <!--歌手介绍页面-->
    <div class="introductionsingers">
        <div class="ISTop">
            <div class="ISTLeft">
                <img :src="sing.singerImg"/>
            </div>
            <div class="ISTRight">
                <div class="ISren">
                    <span class="ISgeshou">歌手</span>
                    <span class="ISName">{{sing.singerName}}</span>
                </div>
                <div style="height: 35px;">
                    <span><img src="../assets/oneplayer.png" style="margin-bottom: -8px;"/></span>
                    <span>单曲数：</span>
                    <span style="margin-left: 5px">16</span>
                </div>
                <div style="height: 35px;">
                    <span><img src="../assets/zhuanji.png" style="margin-bottom: -8px;"/></span>
                    <span>专辑数：</span>
                    <span style="margin-left: 5px">16</span>
                </div>
                <div style="height: 35px;">
                    <span><img src="../assets/mv.png" style="margin-bottom: -8px;"/></span>
                    <span>MV数：</span>
                    <span style="margin-left: 5px">16</span>
                </div>
                <div style="height: 35px;">
                    <span><img src="../assets/guitar.png" style="width: 40px;margin-bottom: -8px;" /></span>
                    <span style="margin-left: 0px">演出数：</span>
                    <span style="margin-left: 5px">16</span>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="IStabs" id="Itabs">
            <ul>
                <li class="active" @click="tabs()">专辑</li>
                <li  @click="tabs()">歌手详情</li>
                <li  @click="tabs()">相似歌手</li>
                <div style="clear: both;"></div>
            </ul>
        </div>
        <hr style="width: 100%;margin: initial;"/>
        <!--专辑-->
        <div class="ISHotSong sing">
            <div class="ISHotSongPicture">
                <img src="../assets/top50.png"/>
            </div>
            <div class="ISHotSongList">
                <p>热门50首</p>
                <div class="ISListBoder">

                    <ul class="ISListBoderUl" v-for="(item,index) in music" :key="item.musicId" @click="sendParams(item.musicId)">
                            <li style="width:10%;padding-left: 10px;">{{index+1}}</li>
                            <li>{{item.musicName}}</li>
                            <li style="width: 55%;text-align: right;">4.15</li>
                        <div style="clear: both;"></div>
                    </ul>

                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <!--歌手详情-->
        <div class="ISIntroduction sing" style="display: none">
            <p>{{sing.singerName}}简介</p>
            <div class="ISProfil">{{sing.singerProfile}}</div>
        </div>
        <!--相似歌手-->
        <div class="ISSameSinger sing" style="display: none">
            <ul>
                <li v-for="item in  likeSinger" :key="item.singerId" @click="sendSingers(item.singerId)">
                    <img :src="item.singerImg"/>
                    <div class="Einfo">
                        <span class="ETName">{{item.singerName}}</span>
                        <div style="clear: both;"></div>
                    </div>
                </li>

                <div style="clear: both;"></div>
            </ul>
        </div>
    </div>
</template>

<script>
    import Left from '@/components/Left.vue'
    export default {
        name: "IntroductionSingers",
        components: {
            Left,
        },
        data(){
            return{
                sing:'',
                music:[],
                likeSinger:[],
            }
        },
        activated(){
            this.sing = ''
            this.music = ''
            this. likeSinger = ''
            this.getSinger();
        },
        methods:{
            getSinger(){
                let id = this.$route.params.singerId;
                this.$http({
                    url:this.$http.adornUrl("/singer/singerAndMusic"),
                    method:'get',
                    params: this.$http.adornParams({
                        id : id
                    })
                }).then(({data})=>{
                    console.log('歌手')
                    console.log(data)
                    this.sing = data.singer;
                    this.music = data.musicList;
                    this.likeSinger =data.likeSingers;
                    // 延迟方法（等页面加载完再执行函数）
                    this.$nextTick(() => {
                        this.judgeNumber();
                    })


                    })
            },

            tabs(){
                var oTab = document.getElementById('Itabs');
                var aLi = oTab.getElementsByTagName('li');
                var aDiv = document.getElementsByClassName('sing');

                for(var i=0;i<aLi.length;i++){
                    aLi[i].index = i;
                    aLi[i].onclick=function () {
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].className = '#96909087';
                            aDiv[i].style.display = 'none';
                        }
                        aLi[this.index].className='active';
                        aDiv[this.index].style.display = 'block';
                    }
                }
            },

            judgeNumber(){

                var aUl = document.getElementsByClassName('ISListBoderUl');
                for(var i=0;i<aUl.length;i++){
                    if(i%2===0){
                        aUl[i].style.background="black";
                    }else{
                        aUl[i].style.background="#96909087";
                    }
                }
            },

            //跳转到音乐播放页
            sendParams(id) {
                this.$router.push('/singerplayer/' + id);
            },
            //跳转到歌手页面
            sendSingers(singerId) {
                this.$router.push('/introductionsingers/' + singerId);
                this.sing = ''
                this.music = ''
                this. likeSinger = ''
                this.getSinger();
            },

        },


    }
</script>

<style scoped>
    .introductionsingers{
        background-color: black;
        width: 100%;
        height: 1000px;
        margin-top: 100px;
    }
    /*人物介绍*/
    .ISTop{
        /*height:300px;*/
        /*background-color: red;*/
    }
    .ISTop .ISTLeft{
        width:300px;
        height: 300px;
        float: left;
    }
    .ISTop .ISTLeft img{
        width: 220px;
        height: 220px;
        margin-top: 20px;
    }
    .ISTop .ISTRight{
        height: 300px;
        float: left;
        margin-top: 20px;
        text-align: left;
    }
    .ISTop .ISTRight span{
        color:white;
        margin-left: 15px;
    }
    .ISTop .ISTRight span img{
        width: 25px;
        height: 25px;
        margin-top: 5px;
    }
    .ISTRight .ISren{
        height: 45px;
    }
    .ISName{
        font-size: 22px;
        color: darkgrey;
    }
    .ISgeshou{
        text-align: center;
        display: inline-block;
        border-radius: 5px;
        font-size: 13px;
        line-height: 25px;
        background-color: red;
        width: 45px;
        height: 25px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    /*选项卡*/
    .IStabs{
        height: 28px;
        line-height: 28px;
        width: 100%;
    }
    .IStabs ul{

        margin: initial;
    }
    .IStabs ul .active{
        background-color: red;
    }
    .IStabs ul li{
        list-style: none;
        float: left;
        width: 5%;
        height: 28px;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        color: white;
        cursor: pointer;
    }

    /*热门歌曲*/
    .ISHotSong{
        width: 100%;
        height: 200px;

    }
    .ISHotSongPicture{
        width: 12%;
        height: 200px;
        float: left;
    }
    .ISHotSongPicture img{
        margin-top: 25px;
    }
    .ISHotSongList{
        width: 70%;
        height: 200px;
        float: left;
    }
    .ISHotSongList p{
        text-align: left;
        margin: initial;
        margin-top: 25px;
        margin-bottom: 10px;
        color: white;
    }
    .ISHotSongList ul{
        padding: initial;
        margin: initial;
        /*margin: 10px 0px;*/
        /*background-color: #7f7f7f99;*/
    }
    .ISHotSongList ul:hover{
        background-color: #bbafaf96!important;
    }
    .ISHotSongList ul li{
        list-style: none;
        float: left;
        width: 20%;
        text-align: left;
        color: white;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
    }

    .ISListBoder{
        border: 1px solid darkgrey;
    }
        /*人物介绍*/
    .ISIntroduction{
        width: 90%;
        margin: 0 auto;
        margin-top: 25px;
    }
    .ISIntroduction p{
        text-align: left;
        color: white;
        font-size: 17px;
    }
    .ISProfil{
        border: 1px solid white;
        text-align: left;
        font-size: 16px;
        text-indent: 2em;
        color: darkgrey;
        line-height: 35px;
        padding: 0px 15px;
    }
    /*相似歌手*/
    .ISSameSinger{

    }
    .ISSameSinger img{
        width: 150px;
        height: 150px;
        margin-top: 20px;
    }
    .ISSameSinger ul li{
        width: 12%;
        float: left;
        list-style: none;
        color: white;
        cursor: pointer;
    }
    .Einfo{
        height: 15px;
    }
    .ETName{
        float: left;
        margin-left: 95px;
        font-size: 15px;
        color: white;
        text-align: center;
        /* margin: 10px 0; */
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .Einfo img{
        width: 15px;
        height: 15px;
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
</style>